<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../../plugins/element-ui/index.css"/>
    <link rel="stylesheet" href="../../styles/common.css"/>
    <link rel="stylesheet" href="../../styles/page.css"/>
    <style>
        .search-btn {
            margin-left: 20px;
        }
        .tableBar{
            justify-content: flex-start !important;
        }
    </style>
    <script src="../../js/echarts.js"></script>

</head>
<body>
<div id="app" class="dashboard-container" v-loading="loading">
    <div class="container">
        <!-- 搜索项 -->
        <div class="tableBar">
            订单日期
            <el-date-picker v-model="orderTime"
                            clearable
                            value-format="yyyy-MM-dd HH:mm:ss"
                            type="datetimerange"
                            placeholder="选择日期"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :default-time="['00:00:00', '23:59:59']"
                            style="width: 400px;margin-left: 20px;"
            ></el-date-picker>
            <el-button type="primary" class="search-btn" @click="getData">查询</el-button>
        </div>

        <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
        <div id="main" style="width: 1000px;height:500px;margin-top: 30px;text-align: center;"></div>
    </div>
</div>

<script src="../../js/echarts.js"></script>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../../plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../../plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../../plugins/axios/axios.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            reportData: [],
            orderTime: '',
            beginTime: '',
            endTime: '',
            loading: false
        },
        mounted() {
            this.getData();
        },
        watch:{
            orderTime (val) {
                if (val && val.length >= 2) {
                    this.beginTime = val[0]
                    this.endTime = val[1]
                } else {
                    this.beginTime = ''
                    this.endTime = ''
                }
            }
        },
        methods: {
            async getData() {
                axios({
                    method: "get",
                    url: "/report/dish",
                    params:{
                        beginTime: this.beginTime || undefined ,
                        endTime: this.endTime || undefined
                    }
                }).then(resp => {
                    this.reportData = resp.data.data;
                    this.drawLine();
                })
            },
            drawLine() {

                // 基于准备好的dom，初始化echarts实例
                let myChart = echarts.init(document.getElementById('main'));
                // 绘制图表
                myChart.setOption({
                    title: { //标题
                        text: '菜品统计',
                        left: 'center'
                    },
                    legend: {
                        top: 'bottom'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c}'
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            mark: {show: true},
                            dataView: {show: true, readOnly: false},
                            restore: {show: true},
                            saveAsImage: {show: true}
                        }
                    },
                    series: [
                        {
                            name: 'Access From',
                            type: 'pie',
                            radius: ['40%', '70%'],
                            avoidLabelOverlap: false,
                            itemStyle: {
                                borderRadius: 10,
                                borderColor: '#fff',
                                borderWidth: 2
                            },
                            label: {
                                show: true,
                                formatter: '{b}:{c}份',
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '40',
                                    fontWeight: 'bold'
                                }
                            },
                            data: this.reportData
                        }
                    ]
                });
            }

        }
    })
</script>
</body>
</html>
